import { useMount } from 'ahooks';
import { Input } from 'antd';
import React, { Dispatch, useMemo } from 'react';
import { NodeProps } from 'reactflow';
import { useContextSelector } from 'use-context-selector';

import { SvgIcon } from '@/components/icon';
import FormLabel from '@/components/MyBox/FormLabel';
import { t } from '@/locales/i18n';
import { AppContext } from '@/pages/app/detail/context';
import { AppChatConfigType, AppDetailType } from '@/types/app/type';
import { FlowNodeItemType } from '@/types/workflow/node';
import { getAppChatConfig } from '@/types/workflow/utils';

import Container from '../../flow/Container';
import NodeCard from '../render/NodeCard';
import ChatFunctionTip from '../system/Tip';

const { TextArea } = Input;

type ComponentProps = {
  chatConfig: AppChatConfigType;
  setAppDetail: Dispatch<React.SetStateAction<AppDetailType>>;
};

const NodePluginConfig = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
  const { appDetail, setAppDetail } = useContextSelector(AppContext, (v) => v);

  const chatConfig = useMemo<AppChatConfigType>(() => {
    return getAppChatConfig({
      chatConfig: appDetail.chatConfig,
      systemConfigNode: data,
      isPublicFetch: true,
    });
  }, [data, appDetail]);

  useMount(() => {
    setAppDetail((state) => ({
      ...state,
      chatConfig: {
        ...state.chatConfig,
        ...chatConfig,
      },
    }));
  });

  const componentsProps = useMemo(
    () => ({
      chatConfig,
      setAppDetail,
    }),
    [chatConfig, setAppDetail],
  );

  return (
    <NodeCard
      selected={selected}
      menuForbid={{
        debug: true,
        copy: true,
        delete: true,
      }}
      {...data}
    >
      <Container w="360px">
        <Instruction {...componentsProps} />
        <div className="pt-4">{/* <FileSelectConfig {...componentsProps} /> */}</div>
      </Container>
    </NodeCard>
  );
};
export default React.memo(NodePluginConfig);

function Instruction({ chatConfig: { instruction }, setAppDetail }: ComponentProps) {
  return (
    <>
      <div className="flex">
        <SvgIcon icon="ic_chat_setting" />
        <FormLabel className="text-sm font-medium text-gray-600">
          {t('plugin.Instructions')}
        </FormLabel>
        <ChatFunctionTip type="instruction" />
      </div>
      <TextArea
        className="mt-2 resize bg-white text-sm"
        title={t('plugin.Instructions')}
        rows={6}
        placeholder={t('plugin.Instruction_Tip')}
        value={instruction}
        autoSize
        style={{
          minHeight: '100px',
          maxHeight: '240px',
        }}
        onChange={(e) => {
          setAppDetail((state) => ({
            ...state,
            chatConfig: {
              ...state.chatConfig,
              instruction: e.target.value,
            },
          }));
        }}
      />
    </>
  );
}

// function FileSelectConfig({ chatConfig: { fileSelectConfig }, setAppDetail }: ComponentProps) {
//   const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
//   const nodes = useContextSelector(WorkflowContext, (v) => v.nodes);
//   const pluginInputNode = nodes.find((item) => item.type === FlowNodeTypeEnum.pluginInput)!;

//   return (
//     <FileSelect
//       value={fileSelectConfig}
//       color="myGray.600"
//       fontWeight="medium"
//       fontSize="14px"
//       onChange={(e) => {
//         setAppDetail((state) => ({
//           ...state,
//           chatConfig: {
//             ...state.chatConfig,
//             fileSelectConfig: e,
//           },
//         }));

//         // Dynamic add or delete userFilesInput
//         const canUploadFiles = e.canSelectFile || e.canSelectImg;
//         const repeatKey = pluginInputNode?.data.outputs.find(
//           (item) => item.key === userFilesInput.key,
//         );
//         if (canUploadFiles) {
//           !repeatKey &&
//             onChangeNode({
//               nodeId: pluginInputNode.id,
//               type: 'addOutput',
//               value: userFilesInput,
//             });
//         } else {
//           repeatKey &&
//             onChangeNode({
//               nodeId: pluginInputNode.id,
//               type: 'delOutput',
//               key: userFilesInput.key,
//             });
//         }
//       }}
//     />
//   );
// }
